<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .login-container {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .form-input {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .form-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }
        .error-message {
            animation: shake 0.5s ease-in-out;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen">
    <div class="login-container rounded-2xl p-8 w-full max-w-md mx-4">
        <div class="text-center mb-8">
            <div class="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-user-shield text-3xl text-white"></i>
            </div>
            <h1 class="text-3xl font-bold text-white mb-2">管理员登录</h1>
            <p class="text-white text-opacity-80">请输入您的凭据访问后台</p>
        </div>

        <form id="loginForm" class="space-y-6">
            <div>
                <label for="username" class="block text-sm font-medium text-white mb-2">
                    <i class="fas fa-user mr-2"></i>用户名
                </label>
                <input type="text" id="username" name="username" 
                       class="form-input w-full px-4 py-3 rounded-lg text-gray-700"
                       placeholder="请输入用户名" required>
                <div id="usernameError" class="text-red-300 text-sm mt-1 hidden">
                    <i class="fas fa-exclamation-triangle mr-1"></i>请输入有效的用户名
                </div>
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-white mb-2">
                    <i class="fas fa-lock mr-2"></i>密码
                </label>
                <div class="relative">
                    <input type="password" id="password" name="password" 
                           class="form-input w-full px-4 py-3 rounded-lg text-gray-700 pr-12"
                           placeholder="请输入密码" required>
                    <button type="button" id="togglePassword" 
                            class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <div id="passwordError" class="text-red-300 text-sm mt-1 hidden">
                    <i class="fas fa-exclamation-triangle mr-1"></i>密码长度至少6位
                </div>
            </div>

            <div class="flex items-center justify-between">
                <label class="flex items-center text-white text-sm">
                    <input type="checkbox" id="remember" name="remember" 
                           class="mr-2 rounded border-gray-300">
                    记住我
                </label>
                <a href="#" class="text-white text-sm hover:text-gray-200 transition">
                    忘记密码？
                </a>
            </div>

            <button type="submit" id="loginBtn" 
                    class="btn-primary w-full py-3 text-white font-semibold rounded-lg">
                <span id="loginText">登 录</span>
                <i id="loginSpinner" class="fas fa-spinner fa-spin hidden ml-2"></i>
            </button>

            <div id="errorMessage" class="error-message bg-red-500 bg-opacity-20 border border-red-500 border-opacity-30 text-red-100 px-4 py-3 rounded-lg hidden">
                <i class="fas fa-exclamation-circle mr-2"></i>
                <span id="errorText"></span>
            </div>
        </form>

        <div class="text-center mt-6">
            <p class="text-white text-opacity-60 text-sm">
                技术支持：Admin System v1.0
            </p>
        </div>
    </div>

    <script src="public/js/login.js"></script>
</body>
</html>
